<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/22
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%--02-jq控制类
    1.添加类   addClass('类名‘）
    2.删除类   removeCalss（'类名')
    3.判断是否有某一个类 hasClass('类名')
    4.切换某一个类    toggleClass('类名'）
    注意：这些类名不用再加.(点）
    --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <title>Title</title>
    <script type="text/javascript">
        $(function (e) {
            //方法1
/*            $('.con ul li').mouseover(function (e) {
                //被花果的li的儿子p消失，img显示
                $(this).children('p').hide();
                $(this).children('img').show();
            });
            $('.con ul li').mouseout(function (e) {
                $(this).children('p').show();
                $(this).children('img').hide();
            });*/
            //方法2
/*            $('.con ul li').hover(function (e) {
                $(this).children('p').hide();
                $(this).children('img').show();
            },function (e) {
                $(this).children('p').show();
                $(this).children('img').hide();
            })*/
            //方法3
/*            $('.con ul li').hover(function (e) {
                $(this).children('p').toggle();
                $(this).children('img').toggle();
            },function (e) {
                $(this).children('p').toggle();
                $(this).children('img').toggle();
            })*/
            //方法4
/*            $('.con ul li').hover(function (e) {
                $(this).children().toggle();

            },function (e) {
                $(this).children().toggle();
            })*/
            //方法5
            $('.con ul li').hover(function (e) {
                $(this).children().toggle();
            })
        });
    </script>
    <style type="text/css">
        * {margin:0 ;padding: 0;list-style: none;}
        .con {width: 320px;margin: 100px auto;border: 1px solid #000;test-align: center ;}
        .con ul li { border-bottom: 1px dashed #ccc; padding: 10px 0; color: gold;}
        .con ul li img {display: none}
        .con ul li p {background: url(../img/1.png) no-repeat left center;}
    </style>


</head>
<body>
    <div class="con">
        <img src="../img/图书列表.png" width="320" height="47">
        <ul>
            <li>
                <p>图书编号1 20.0元</p>
                <img src="../img/pic_7.png" width="200" height="100">
            </li>
            <li>
                <p>图书编号2 20.0元</p>
                <img src="../img/pic_7.png" width="200" height="100">
            </li>
            <li>
                <p>图书编号3 20.0元</p>
                <img src="../img/pic_7.png" width="200" height="100">
            </li>
            <li>
                <p>图书编号4 20.0元</p>
                <img src="../img/pic_7.png" width="200" height="100">
            </li>
        </ul>
    </div>
</body>
</html>
